<template>
	<view>
		<view class="top">
			<view style="height:130upx;">
				<view class="top_left">
					<text>{{scores}}</text>
					<text>积分</text>
				</view>
			</view>
			<view class="radius"></view>
		</view>
		<view class="goods">
			<view class="goods_title">积分商城</view>
			<view class="goods_lists">
				
				<block v-for="(item,index) in goods" :key="index">
					<view class="goods_list">
						<image :src="baseUrl+item.img"></image>
						<view class="goods_list_title">{{item.title}}</view>
						<view class="goods_list_scores">
							<view class="goods_list_score">{{item.score}}积分</view>
							<view class="goods_list_button" @tap="toorder(item.id)">兑换</view>
						</view>
					</view>
				</block>
				
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				page:1,
				baseUrl:request.common.baseUrl,
				scores:'',
				goods:[]
			}
		},
		onLoad:function(option){
			uni.request({
				url: request.common.baseUrl+'/api/distributor/myScore',
				data: {
					token:uni.getStorageSync('keyToken')
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.scores=res.data.data.score
					}
				}
			});
			uni.request({
				url: request.common.baseUrl+'/api/goods/goods',
				data: {
					page:this.page
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.goods=res.data.data
					}
				}
			});
		},
		methods: {
			toorder(id){
				if(this.scores>0){
					uni.navigateTo({
						url:'/pages/score/order?id='+id
					})
				}else{
					uni.showToast({
						title: '积分不够',
						icon: 'none',
						duration: 2000
					});
				}
			}
		},
		onReachBottom:function(){
			this.page=this.page+1
			uni.request({
				url: request.common.baseUrl+'/api/goods/goods',
				data: {
					page:this.page
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						for (var j = 0; j < res.data.data.length; j++) {
							this.goods.push(res.data.data[j])
						}
					}else{
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
		}
	}
</script>

<style>
page{
	background-color: #FFFFFF;
}
.top{
	width:750upx;
	height:180upx;
	background-color:#33cc00;
}
.top_left{
	float:left;
	margin:30upx 0 0 35upx;
}
.top_left text:nth-child(1){
	font-size:38upx;
	color:#FFFFFF;
	float:left;
}
.top_left text:nth-child(2){
	font-size:24upx;
	color:#FFFFFF;
	margin-left:15upx;
	float:left;
	margin-top:20upx;
}
.radius{
	width:750upx;
	height:50upx;
	background-color:#FFFFFF;
	border-top-left-radius:30upx;
	border-top-right-radius:30upx;
	padding-bottom:4upx;
}
.goods{
	width:690upx;
	margin:0 30upx 30upx;
}
.goods_title{
	height:40upx;
	line-height:40upx;
	font-size:36upx;
	font-weight:700;
	color:#111111;
}
.goods_lists{
	width:690upx;
}
.goods_list{
	width:330upx;
	float:left;
	background-color:#f9f9f9;
	margin-top:25upx;
}
.goods_list:nth-child(even){
	margin-left:30upx;
}
.goods_list:last-child{
	margin-bottom:30upx;
}
.goods_list image{
	width:330upx;
	height:200upx;
}
.goods_list_title{
	height:40upx;
	line-height:40upx;
	font-size:24upx;
	color:#333333;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:300upx;
	margin-left:15upx;
}
.goods_list_scores{
	height:60upx;
}
.goods_list_score{
	float:left;
	font-size:24upx;
	color:#999999;
	margin-left:15upx;
}
.goods_list_button{
	float:right;
	border:1upx solid #ff6101;
	color:#ff6101;
	font-size:24upx;
	height:40upx;
	line-height:40upx;
	border-radius:20upx;
	padding:0 15upx;
	margin-right:15upx;
}
</style>
